<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        function getRandomInt(min, max) {
            min = Math.ceil(min); // 向上取整
            max = Math.floor(max); // 向下取整
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // 使用示例
        // var randomNum = getRandomInt(1, 10); // 获取1到10之间的随机整数
        // console.log(randomNum);
        const body = document.body;
        for (let i = 0; i < 100; i++) {
            const div = document.createElement("div");
            const divWidth = getRandomInt(10, 200)
            const winWidth = window.innerWidth;
            const winHeight = window.innerHeight;
            const left = getRandomInt(0, winWidth - divWidth)
            const top = getRandomInt(10, winHeight - divWidth)

            let obj = {
                position: "absolute",
                width: divWidth + 'px',
                height: divWidth + 'px',
                "border-radius": "100%",
                left: left + 'px',
                top: top + 'px',
                "background-color": `rgba(${getRandomInt(0, 255)},${getRandomInt(0, 255)},${getRandomInt(0, 255)},${getRandomInt(0.1, 1)})`
            }
            function setDivStyle(div, obj) {
                for (let property in obj) {
                    if (obj.hasOwnProperty(property)) {
                        div.style[property] = obj[property];
                    }
                }
            }
            setDivStyle(div, obj)
            document.body.appendChild(div)
        }
    </script>
</body>

</html>